<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="疫情板块" name="covid">
        <h2 class="title1">疫情实时大数据报告</h2>
        <br />
        <div
          style="filter: alpha(opacity=100, finishopacity=0, style=3)"
          width="80%"
          color="#987cb9"
          SIZE="3"
        ></div>
        <!-- 疫情可视化 -->
        <el-row :gutter="20">
          <!-- 数据模块 -->
          <el-col :span="12">
            <el-card class="box-card">
              <div class="title" style="margin-top: 10px; margin-left: 10px">
                <!--  -->
                <span>更新至：{{formatDate(caseNumDate.modifyTime) ? formatDate(caseNumDate.modifyTime) : '暂无数据'}} 全国数据统计</span>
              </div>
              <div class="case-num">
                <div class="container">
                  <el-row :gutter="20" style="margin-top: 38px">
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">现存累计确诊</p>
                          <p class="nums" style="color: #ff6a5a">
                            {{ caseNumDate.currentConfirmedCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #ff6a5a">{{
                              caseNumDate.currentConfirmedIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">累计确诊人数</p>
                          <p class="nums" style="color: #e42325">
                            {{ caseNumDate.confirmedCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #e42325">{{
                              caseNumDate.confirmedIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">累计境外确诊</p>
                          <p class="nums" style="color: #335990">
                            {{ caseNumDate.foreignConfirmedCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #335990">{{
                              caseNumDate.foreignConfirmedIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row
                    :gutter="20"
                    style="margin-top: 40px; margin-bottom: 40px"
                  >
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">累计治愈人数</p>
                          <p class="nums" style="color: #e45836">
                            {{ caseNumDate.curedCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #e45836">{{
                              caseNumDate.curedIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">累计死亡人数</p>
                          <p class="nums" style="color: #ed9f44">
                            {{ caseNumDate.deadCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #ed9f44">{{
                              caseNumDate.deadIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="box-card" shadow="hover">
                        <div class="left-item">
                          <p class="desc">境外死亡人数</p>
                          <p class="nums" style="color: #06a1a8">
                            {{ caseNumDate.foreignDeadCount }}
                          </p>
                          <div class="first" style="color: #929292">
                            较昨日
                            <div class="up"></div>
                            <span style="color: #06a1a8">{{
                              caseNumDate.foreignDeadIncr
                            }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 图表模块 -->
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>疫情图表</span>
                </div>
              </template>
              <div
                style="height: 315px; width: 580px"
                id="myChart"
                ref="myChart"
              ></div>
            </el-card>
          </el-col>
        </el-row>
        <div class="case-num"></div>
      </el-tab-pane>
      <!-- 新闻资讯板块 -->
      <el-tab-pane label="新闻资讯" name="news">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div class="newsTitle">社会新闻</div>
              <div class="news">
                <li
                  v-for="(item, index) in linkSocial"
                  :key="index"
                  class="newsBody"
                >
                  <el-link
                    class="link"
                    type="primary"
                    v-bind:href="item.url"
                    target="_blank"
                    :underline="false"
                    >{{ item.title }}
                  </el-link>
                </li>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="newsTitle">体育新闻</div>
              <div class="news">
                <li
                  v-for="(item, index) in linkSports"
                  :key="index"
                  class="newsBody"
                >
                  <el-link
                    class="link"
                    type="primary"
                    v-bind:href="item.url"
                    target="_blank"
                    :underline="false"
                    >{{ item.title }}
                  </el-link>
                </li>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div class="newsTitle">娱乐新闻</div>
              <div class="news">
                <li
                  v-for="(item, index) in linkEntainment"
                  :key="index"
                  class="newsBody"
                >
                  <el-link
                    class="link"
                    type="primary"
                    v-bind:href="item.url"
                    target="_blank"
                    :underline="false"
                    >{{ item.title }}
                  </el-link>
                </li>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="newsTitle">科技新闻</div>
              <div class="news">
                <li
                  v-for="(item, index) in linkTechnology"
                  :key="index"
                  class="newsBody"
                >
                  <el-link
                    class="link"
                    type="primary"
                    v-bind:href="item.url"
                    target="_blank"
                    :underline="false"
                    >{{ item.title }}
                  </el-link>
                </li>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import axios from 'axios';
import api from "@/api/hot";
import "echarts/map/js/china.js";
import { color } from "echarts/lib/export";

export default {
  data() {
    return {
      activeName: "covid",
      value: "",
      caseNumDate: {
        modifyTime: "", //时间戳

        currentConfirmedCount: "", //现存累计确诊
        currentConfirmedIncr: "", //较昨日

        confirmedCount: "", //累计确诊人数
        confirmedIncr: "", //较昨日

        foreignConfirmedCount: "", //累计境外确诊
        foreignConfirmedIncr: "", //较昨日

        curedCount: "", //累计治愈人数
        curedIncr: "", //较昨日

        deadCount: "", //累计死亡人数
        deadIncr: "", //较昨日

        foreignDeadCount: "", //全球死亡人数
        foreignDeadIncr: "", //较昨日
      },
      linkSocial: [],
      linkEntainment: [],
      linkSports: [],
      linkTechnology: [],
      mapData: [],
    };
  },
  methods: {
    //切换选项卡
    handleClick() {
      if (this.activeName == "covid") {
        //疫情模块
        this.drawMap(this.mapData);
      } else if (this.activeName == "news") {
        //新闻资讯
      } else {
        //敬请期待
      }
    },
    //时间戳转换方法    time:需要被转换的时间戳数字
    formatDate(data) {
      var date = new Date(parseInt(data));
      var year = date.getFullYear();
      var mon = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var min = date.getMinutes();
      return year + "/" + mon + "/" + day + " " + hour + ":" + min;
    },
    drawMap(mapData) {
      //画中国地图
      let myChart = this.$echarts.init(this.$refs.myChart);

      myChart.setOption({
        tooltip: {
          show: true,
        },
        visualMap: [
          {
            type: "continuous",
            min: 0,
            max: 500,
            inRange: {
              color: ["#ccf", "#33f"],
            },
            text: ["高", "低"],
          },
        ],
        geo: {
          map: "china",
          label: {
            show: true,
          },
          itemStyle: {
            color: "#fff",
          },
        },
        series: [
          // 这里是地区颜色
          {
            name: "累计确诊",
            type: "map",
            geoIndex: 0,
            data: mapData,
          },
        ],
      });
    },
  },
  mounted() {
    //获取地图数据
    let that = this;
    var res = require("../../api/mapData.json");
    //console.log(res);
    for (const one of res.features) {
      let temp = {
        name: one.properties.name,
        value: one.properties.累计确诊,
      };
      if (
        temp.name.length >= 3 &&
        temp.name != "内蒙古自治区" &&
        temp.name != "黑龙江省"
      )
        temp.name = temp.name.slice(0, 2);
      else {
        temp.name = temp.name.slice(0, 3);
      }
      that.mapData.push(temp);
    }
    that.drawMap(that.mapData);

    //获取社会新闻
    api
      .getSocial({
        key: "f4d5d764f8205cf5d688aeb364cc6aec",
        num: "10",
      })
      .then((res) => {
        //console.log(res);
        for (var i = 0; i < res.data.newslist.length; i++) {
          var temp = {
            title: res.data.newslist[i].title,
            url: res.data.newslist[i].url,
          };
          that.linkSocial.push(temp);
        }
      })
      .catch((error) => {});

    //获取娱乐新闻
    api
      .getEntertain({
        key: "f4d5d764f8205cf5d688aeb364cc6aec",
        num: "10",
      })
      .then((res) => {
        //console.log(res);
        for (var i = 0; i < res.data.newslist.length; i++) {
          var temp = {
            title: res.data.newslist[i].title,
            url: res.data.newslist[i].url,
          };
          that.linkEntainment.push(temp);
        }
      })
      .catch((error) => {});

    //获取体育新闻
    api
      .getSports({
        key: "f4d5d764f8205cf5d688aeb364cc6aec",
        num: "10",
      })
      .then((res) => {
        //console.log(res);
        for (var i = 0; i < res.data.newslist.length; i++) {
          var temp = {
            title: res.data.newslist[i].title,
            url: res.data.newslist[i].url,
          };
          that.linkSports.push(temp);
        }
      })
      .catch((error) => {});

    //获取科技新闻
    api
      .getTechnology({
        key: "f4d5d764f8205cf5d688aeb364cc6aec",
        num: "10",
      })
      .then((res) => {
        //console.log(res);
        for (var i = 0; i < res.data.newslist.length; i++) {
          var temp = {
            title: res.data.newslist[i].title,
            url: res.data.newslist[i].url,
          };
          that.linkTechnology.push(temp);
        }
      })
      .catch((error) => {});

    api
      .getNcov({
        key: "f4d5d764f8205cf5d688aeb364cc6aec",
      })
      .then((res) => {
        //console.log(res.data);
        //疫情病例数
        this.caseNumDate.modifyTime = res.data.newslist[0].desc.modifyTime; //时间戳

        this.caseNumDate.confirmedCount =
          res.data.newslist[0].desc.confirmedCount; //累计确诊
        this.caseNumDate.confirmedIncr =
          res.data.newslist[0].desc.confirmedIncr;

        this.caseNumDate.currentConfirmedCount =
          res.data.newslist[0].desc.currentConfirmedCount; //现存累计确诊
        this.caseNumDate.currentConfirmedIncr =
          res.data.newslist[0].desc.currentConfirmedIncr;

        this.caseNumDate.curedCount = res.data.newslist[0].desc.curedCount; //治愈人数
        this.caseNumDate.curedIncr = res.data.newslist[0].desc.curedIncr;

        this.caseNumDate.deadCount = res.data.newslist[0].desc.deadCount; //死亡人数
        this.caseNumDate.deadIncr = res.data.newslist[0].desc.deadIncr;

        this.caseNumDate.foreignDeadCount =
          res.data.newslist[0].desc.foreignStatistics.deadCount; //境外死亡
        this.caseNumDate.foreignDeadIncr =
          res.data.newslist[0].desc.foreignStatistics.deadIncr;

        this.caseNumDate.foreignConfirmedCount =
          res.data.newslist[0].desc.foreignStatistics.confirmedCount; //境外确诊
        this.caseNumDate.foreignConfirmedIncr =
          res.data.newslist[0].desc.foreignStatistics.confirmedIncr;
      })
      .catch((error) => {});
  },
};
</script>
<style>
.news {
  width: 580px;
  padding-bottom: 10px;
  padding-top: 15px;
  margin-left: 30px;
}

.newsBody {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 25px;
}

.link:hover {
  text-decoration: none;
}

.left-item {
  text-align: center;
}

.left-item .nums {
  font-size: x-large;
  color: #0f7eee;
}

.left-item .first {
  justify-content: center;
  display: flex;
}

.left-item .up {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 6px;
  border-color: transparent transparent red transparent;
  border-style: dashed dashed solid dashed;
  margin-left: 5px;
  margin-right: 5px;
}

.left-item .down {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 6px;
  margin-top: 8px;
  border-color: blue transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.left-item .desc {
  font-size: large;
}

.newsTitle {
  text-shadow: 1px 1px 2px #222222;
  line-height: 25px;
  font-size: 20px;
  text-align: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.title1 {
  text-align: center;
  color: #7aac9f;
  font-family: "微软雅黑", "宋体", "黑体", Arial;
  font-size: 30px;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  margin: 18px 0 !important;
  padding: 8px 0 5px 5px;
  text-shadow: 2px 2px 3px #222222;
}
</style>